<template>
  <span class="span-img" @click="showBigImg">
    <el-image
      :style="selfStyle"
      class="myImg"
      :src="src"
      placeholder="无"
    />
    <el-dialog :show-close="true" :visible.sync="isShowBigImg" width="700px" height="500px" class="my-dialog-center" :append-to-body="true">
      <el-image
        style="width: 100%;"
        :src="src"
      />
    </el-dialog>
  </span>
</template>

<script>
export default {
  name: 'MyImg',
  props: ['src', 'myStyle'],
  data() {
    return {
      selfStyle: this.myStyle || {},
      isShowBigImg: false
    }
  },
  mounted: function() {
  },
  methods: {
    showBigImg(val) {
      this.isShowBigImg = true
    }
  }
}
</script>

<style scoped>
  .myImg{
    width: 160px;
    height: 90px;
    padding: 3px;
  }
</style>
